<template>
    <div class="page-container">

        <router-view v-if="$route.name !== 'Sign'"></router-view>
        <!-- 主要内容区域 -->
        <div v-else>

             <!-- 顶部标题栏 -->
             <header class="header">
                <BackBtn />
                <h1>签到列表</h1>
                <Time />
            </header>


            <div class="main-content"  style="padding-top: 150px;">
                <!-- 搜索和筛选区域 -->
                <div class="search-section">
                    <el-input v-model="searchText" placeholder="支持搜索签到项目" class="search-input">
                        <template #append>
                            <el-button type="danger" class="search-btn" @click="handleSearch">
                                <el-icon class="search-icon">
                                    <Search />
                                </el-icon>
                            </el-button>
                        </template>
                    </el-input>

                    <div class="filter-section">
                        <!-- 日期范围选择 -->
                        <div class="date-range-picker">
                            <el-date-picker v-model="dateRange[0]" type="date" placeholder="开始日期" class="date-picker"
                                format="YYYY-MM-DD" value-format="YYYY-MM-DD" @change="handleFilterChange" />
                            <span class="separator">—</span>
                            <el-date-picker v-model="dateRange[1]" type="date" placeholder="结束日期" class="date-picker"
                                format="YYYY-MM-DD" value-format="YYYY-MM-DD" @change="handleFilterChange" />
                        </div>

                        <!-- 排序选择 -->
                        <el-select v-model="sortBy" placeholder="排序：发起日期(倒序)" @change="handleFilterChange">
                            <el-option label="发起日期(倒序)" value="desc" />
                            <el-option label="发起日期(正序)" value="asc" />
                            <el-option label="签到日期(倒序)" value="desc1" />
                            <el-option label="签到日期(正序)" value="asc1" />
                        </el-select>

                        <!-- 状态筛选 -->
                        <el-select v-model="status" placeholder="状态：全部" @change="handleFilterChange">
                            <el-option label="状态筛选：全部" value="all" />
                            <el-option label="已签齐" value="signed" />
                            <el-option label="未签齐" value="unsigned" />
                        </el-select>

                        <!-- 查看结果的签到 -->
                        <el-button class="showOverMeeting" @click="handleSelectOverSign">查看结束的签到</el-button>

                        <!-- 发起签到按钮 -->
                        <el-button type="danger" @click="handleAddSign" class="add-meeting-btn" >发起签到</el-button>
                    </div>
                </div>

                <!-- 表格区域 -->
                <div class="table-section">
                    <div class="sign-list" v-loading="loading" element-loading-text="加载中..." element-loading-background="rgba(0,0,0,0)">
                        <!-- 表头 -->
                        <div class="sign-header">
                            <div class="header-item title" style="margin-left: 50px;">签到项目</div>
                            <div class="header-item status">签到状态</div>
                            <div class="header-item sign-date">签到时间</div>
                            <div class="header-item create-date" style="margin-left: 40px;">发起日期</div>
                            <div class="header-item actions"></div>
                        </div>

                        <!-- 数据列表 -->
                        <div v-for="(item, index) in signs" :key="index" class="sign-item">
                            <div class="red-line"></div>
                            <div class="sign-info">
                                <div class="info-title" style="margin-left: 20px;">{{ item.title }}</div>
                                <div class="info-status" :style="{ color: getStatusColor(item.signStatus) }">
                                    {{ item.signStatus }}
                                    <el-button class="showOverMeeting" @click="handleDetail(item)">
                                        签到情况
                                    </el-button>
                                </div>
                                <div class="info-sign-date">{{ item.startTime }}至{{ item.endTime }}</div>
                                <div class="info-create-date" style="margin-left: 40px;">{{ item.createdAt }}</div>
                                <div class="info-actions">
                                    <el-button type="primary" @click="handleDataDetail(item)">详情</el-button>
                                    <el-button type="danger" @click="handleCancel(item)">取消</el-button>
                                </div>
                            </div>
                        </div>
                    </div>


                    <!-- 分页 -->
                    <div class="pagination-section">
                        <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize"
                            :page-sizes="[3, 5, 10, 15]" :background="false" layout="prev, pager, next, jumper"
                            :total="total" @size-change="onSizeChange" @current-change="onCurrentChange" />
                    </div>
                </div>
            </div>


        </div>
    </div>
</template>

<script setup>
import { ref, onMounted ,onUnmounted} from 'vue'
import { useRouter } from 'vue-router'
import { ElMessageBox, ElMessage } from 'element-plus'
import { useSignsStore } from '@/stores/signs'
import { storeToRefs } from 'pinia'
import { deleteSign } from '@/api/sign'
import Time from '@/components/Time.vue'
import BackBtn from '@/components/Back-btn.vue'
const router = useRouter()
const signsStore = useSignsStore()
const {
    signs,
    total,
    pageNum,
    pageSize,
    dateRange,
    sortBy,
    loading,
    searchText,
    status
} = storeToRefs(signsStore)


// 获取签到列表数据
const fetchSignList = () => {
    signsStore.fetchSigns()
}

// 处理搜索
const handleSearch = () => {
    pageNum.value = 1
    fetchSignList()
}

// 处理筛选条件变化
const handleFilterChange = () => {
    pageNum.value = 1
    fetchSignList()
}

// 分页大小改变
const onSizeChange = (val) => {
    pageSize.value = val
    fetchSignList()
}

// 页码改变
const onCurrentChange = (val) => {
    pageNum.value = val
    fetchSignList()
}

// 发起签到
const handleAddSign = () => {
    router.push({ name: 'SignAdd' })
}

// 查看结束的签到
const handleSelectOverSign = () => {
    signsStore.resetFilters() // 重置筛选条件
    router.push({ name: 'SignEndList' })
}

// 查看签到情况
const handleDetail = (row) => {
    router.push(`/sign/detail/${row.mid}`)
}

// 查看签到详情
const handleDataDetail = (row) => {
    router.push(`/sign/data/${row.mid}`)
}

// 取消签到
const handleCancel = async (row) => {
    try {
        await ElMessageBox.confirm('确定要删除这次签到吗？删除后数据将无法恢复', '警告', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        })
        
        loading.value = true
        const response = await deleteSign(row.mid)
        if (response.code === 200) {
            ElMessage.success('签到已删除')
            fetchSignList()
        } else {
            ElMessage.error(response.msg || '删除签到失败')
        }
    } catch (error) {
        if (error !== 'cancel') {
            console.error('删除签到失败:', error)
            ElMessage.error('删除签到失败')
        }
    } finally {
        loading.value = false
    }
}

// 添加一个方法来获取状态颜色
const getStatusColor = (status) => {
    switch (status) {
        case '已签齐':
            return 'green';
        case '未签齐':
            return 'red';
        case '无参会人':
            return 'gray';
    }
}

// 重置所有筛选条件的函数
const resetFilters = () => {
    searchText.value = ''  // 重置搜索文本
    dateRange.value = [null, null]  // 重置日期范围
    status.value = 'all'  // 重置状态筛选
    sortBy.value = 'desc'  // 重置时间排序为默认的倒序
    pageNum.value = 1  // 重置页码
}


onMounted(() => {
    resetFilters()  // 初始化重置
    signsStore.fetchSigns()
})

// 添加组件卸载钩子
onUnmounted(() => {
  pageNum.value = 1  // 组件卸载时重置页码
})


</script>

<style scoped>
@import '@/assets/css/meeting/list.css';
@import '@/assets/css/header/index.css';

@import '@/assets/css/others/pagination.css';
@import '@/assets/css/others/btn.css';
@import '@/assets/css/others/dateEditor.css';
@import '@/assets/css/others/select.css';

/* 签到列表样式 */
.sign-list {
  border-radius: 4px;
  margin-bottom: 20px;
  margin-left: 125px;
  min-width: 1000px;
  width: 80%;
}

.sign-header {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  padding: 15px;
  /* background-color: #f5f7fa; */
  color: black;
}

.sign-item {
  background: #fff;
  border-radius: 10px;
  position: relative;
  border: 1px solid #e4e7ed;
  margin-bottom: 10px;
  transition: all 0.3s ease;
}

.sign-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  border-color: #c62828;
}


.red-line {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  height: 35px;
  background: #c62828;
  border-radius: 8px;
  margin: 13px;
  transition: height 0.3s ease;
}

.sign-item:hover .red-line {
  height: 60%;
}


.sign-info {
    display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  padding: 10px;
  align-items: center;
}

.info-title {
    margin-left: 12px;
}

.info-status {
    display: flex;
    align-items: center;
    gap: 10px;
}

.info-actions {
    display: flex;
    gap: 10px;
}

.showOverMeeting {
    margin-right: 10px;
}

.search-section {
    /* background: white; */
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 10px;
    /* box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1); */
    margin-left: 105px;
    min-width: 1000px;
    width: 84%;
  }
  
  /* 搜索框特定样式 */
  .search-input {
    margin-bottom: 20px;
  }
  
  .search-input :deep(.el-input__wrapper) {
    height: 40px !important;
    border-radius: 8px 0 0 8px !important;
    padding: 0 12px !important;
    box-sizing: border-box;
  }
  
  .search-input :deep(.el-input:hover .el-input__wrapper) {
    box-shadow: 0 0 0 1px #c62828 inset !important;
  }
  
  .search-input :deep(.el-input__wrapper.is-focus) {
    box-shadow: 0 0 0 1px #c62828 inset !important;
  }
  
  .search-input :deep(.el-input-group__append) {
    padding: 0 !important;
    border: none !important;
    background: none !important;
  }
  
  /* 搜索按钮样式 */
  .search-btn {
    background-color: #c62828 !important;
    border: none;
    height: 40px;
    width: 180px;
    color: white;
    padding: 5px 10px;
    border-radius: 0 8px 8px 0 !important;
    cursor: pointer;
  }
  
  .search-btn:hover {
    background-color: #a91919 !important;
  }
  
  .search-btn .el-icon {
    font-size: 20px;
    color: white;
  }
</style>